<template>
	<view>
		<view class="formModel">
			<view class="cu-form-group">
				<view class="title">养殖场名</view>
				<input type="text" placeholder='请输入养殖场名称' v-model="farmName"/>
			</view>
			
			<view class="cu-form-group">
				<view class="title">养殖户名称</view>
				<input type="text" placeholder='请输入养殖户名称' v-model="farmFarmers"/>	
			</view>
			<view class="cu-form-group">
				<view class="title">养殖户联系方式</view>
				<input type="number" placeholder='请输入11位手机号' v-model="farmFarmersPhones"/>	
			</view>
			
			<view class="cu-form-group">
				<view class="title">挂联村干部姓名</view>
				<input type="text"  placeholder='请输入联村干部名称' v-model="farmLianliancunCadres"/>
			</view>
			
			<view class="cu-form-group">
				<view class="title">挂联村干部联系方式</view>
				<input type="number" placeholder='请输入挂联村干部联系方式' v-model="farmCadresPhone"/>	
			</view>
			
			<view class="cu-form-group" @tap="openLevel">
				<view class="title">所属区域选择</view>
				<picker disabled="flase">
					<view class="picker">
							<block v-if="pickerText == ''"><text>请选择所属区域</text></block>
							<block v-else>{{pickerText}}</block>
					</view>
				</picker>	
			</view>
			
			<view class="cu-form-group">
				<view class="title">选择地址</view>
				<picker disabled="flase">
					<view class="picker" @tap="chooseEdress">
						<block v-if="farmAddress == ''"><text>打开地图选择地址</text></block>
						<block v-else>{{farmAddress}}</block>
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">地址补充</view>
				<input type="text" placeholder='对地址进行补充(非必填)' v-model="farm_address"/>	
			</view>
			<view class="cu-form-group">
				<view class="title">畜牧数量</view>
				<input type="number" placeholder='请输入畜牧数量' v-model="farmSeed"/>	
			</view>
			
			<view class="cu-form-group">
				<view class="title">种植作物</view>
				<input type="text" placeholder='请输入种植作物' v-model="farm_raise_crops"/>	
			</view>
			<view class="cu-form-group">
				<view class="title">栏舍总面积（㎡）</view>
				<input type="digit" placeholder='请输入栏舍面积' v-model="farmTotalArea"/>
			</view>
			
			<view class="cu-form-group">
				<view class="title">传统栏舍面积（㎡）</view>
				<input type="digit" placeholder='请输入传统栏舍面积' v-model="farmTraditionalHurdles"/>
			</view>
			
			<view class="cu-form-group">
				<view class="title">高架床面积（㎡）</view>
				<input type="digit" placeholder='请输入高架床面积' v-model="farmElevatedBed"/>
			</view>
			
			<view class="cu-form-group">
				<view class="title">低架床面积（㎡）</view>
					<input type="digit" placeholder='请输入低架床面积' v-model="farmLowBed"/>	
			</view>
			
			<view class="cu-form-group">
				<view class="title">沼气池体积（m³）</view>
					<input type="digit" placeholder='请输入沼气池体积' v-model="farmBiogasDigester"/>	
			</view>
			
			<view class="cu-form-group">
				<view class="title">储粪池面积（㎡）</view>
					<input type="digit" placeholder='请输入储粪池面积' v-model="farmSepticTank"/>	
			</view>
			
			<view class="cu-form-group">
				<view class="title">储液池体积（m³）</view>
					<input type="digit" placeholder='请输入储液池体积' v-model="farmStorageTank"/>	
			</view>
			
			<view class="cu-form-group" style="justify-content:start;">
				<view class="title">是/否禁养区</view>
				<radio-group class="RadioStyle" @change="radioChange">
					<radio color="#4AC997" value="1">是</radio>
					<radio color="#4AC997" value="0">否</radio>
				</radio-group>
			</view>
			<view class="cu-form-group" style="justify-content:start;">
				<view class="title">是/否干清粪</view>
				<radio-group class="RadioStyle" @change="radioChange1">
					<radio color="#4AC997" value="1">是</radio>
					<radio color="#4AC997" value="0">否</radio>
				</radio-group>
			</view>
			
			<view class="cu-form-group" style="justify-content:start;">
				<view class="title">是/否改水</view>
				<radio-group class="RadioStyle" @change="radioChange2">
					<radio color="#4AC997" value="1">是</radio>
					<radio color="#4AC997" value="0">否</radio>
				</radio-group>
			</view>
			
			<view class="cu-form-group" style="justify-content:start;">
				<view class="title">是/否直排</view>
				<radio-group class="RadioStyle" @change="radioChange6">
					<radio color="#4AC997" value="1">是</radio>
					<radio color="#4AC997" value="0">否</radio>
				</radio-group>
			</view>
			<view class="cu-form-group" style="justify-content:start;">
				<view class="title">是/否使用益生菌</view>
				<radio-group class="RadioStyle" @change="radioChange4">
					<radio color="#4AC997" value="1">是</radio>
					<radio color="#4AC997" value="0">否</radio>
				</radio-group>
			</view>
			
			<view class="cu-form-group" style="justify-content:start;">
				<view class="title">是/否完成生态化改造</view>
				<radio-group class="RadioStyle" @change="radioChange5">
					<radio color="#4AC997" value="1">是</radio>
					<radio color="#4AC997" value="0">否</radio>
				</radio-group>
			</view>
			
			<view class="cu-form-group">
				<view class="title">自有土地消纳总量/吨</view>
					<input type="digit" placeholder='请输入自有土地消纳量' v-model="farmAbsorptiveArea"/>	
			</view>
			
			<view class="cu-form-group">
				<view class="title">土地消纳面积(㎡)</view>
					<input type="digit" placeholder='请输入土地消纳面积' v-model="farmTotalConsumption"/>	
			</view>
			
			<view class="cu-form-group">
				<view class="title">第三方消纳机构名称</view>
					<input type="text" placeholder='请输入第三方处理机构名称' v-model="otherNames"/>	
			</view>
			<view class="cu-form-group">
				<view class="title">第三方消纳总量/吨</view>
					<input type="digit" placeholder='请输入消纳总量' v-model="farm_collection_total"/>	
			</view>
			
			<view class="cu-form-group">
				<view class="title">运收周期/天</view>
					<input type="number" placeholder='请输入运收周期' v-model="other_cycle"/>	
			</view>
			<view class="cu-form-group">
				<view class="title">第三方联系方式</view>
				<input type="number" placeholder='请输入第三方联系方式' v-model="otherPhone"/>
			</view>
			<view class="cu-form-group" style="justify-content:start;">
				<view class="title">是/否有动物防疫合格证</view>
				<radio-group class="RadioStyle" @change="radioChange3">
					<radio checked="true" color="#4AC997" value="1">是</radio>
					<radio color="#4AC997" value="0">否</radio>
				</radio-group>
			</view>
			
			<template v-if="farm_certificate==='1'">
			<view class="cu-bar bg-white" style="justify-content: space-between;margin-top:5rpx">
				<view class="action">
					图片上传
				</view>
				<view class="action" style="font-size: 30rpx;">
					{{imgList.length}}/4
				</view>
			</view>
			
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			</template>
		</view>
		<level-linkage ref="levelLinkage" :pickerValueDefault="pickerValueDefault" :allData="this.ThreeArea.provinceList" @onConfirm="onConfirm"
				 themeColor='#007AFF'>
		</level-linkage>
	</view>
</template>

<script>
	import levelLinkage from "../../components/three-level-linkage/linkage.vue"
	export default {
		data() {
			return {
				pickerValueDefault: [0, 0, 0],
				pickerText: '',
				isShow: true,
				farmName:'', //养殖场名称
				farmFarmers:'', //养殖户名称
				farmFarmersPhones:'', //养殖户联系方式
				farmLianliancunCadres:'', //挂联村干部姓名
				farmCadresPhone:'', //挂联村干部联系方式
				farmAddress:'', //养殖场地址
				farm_address:'',//养殖场地址补充
				farmSeed:'', //畜牧数量
				farmTotalArea:'', //栏舍总面积
				farmTraditionalHurdles:'', //传统栏舍面积
				farmElevatedBed:'', //高架床面积
				farmLowBed:'',  //低架床面积
				farmBiogasDigester:'', //沼气池体积
				farmSepticTank:'', //储粪池面积
				farmStorageTank:'', //储液池体积
				farm_certificate:'1',//是否有免疫合格证
				farmDryExcrement:'', //是/否干清粪
				farmWaterImprovement:'', //是/否改水
				farm_straight:'', //是/否直排
				farmUseProbiotics:'', //是/否使用益生菌
				farmTransformation:'', //是/否完成生态化改造
				farm_prohibited_area:'',//是否禁养
				farmAbsorptiveArea:'', //自有土地消纳总量/吨
				farmTotalConsumption:'', //土地消纳面积
				farm_raise_crops:'', //种植作物
				otherNames:'', //第三方消纳机构名称
				otherPhone:'', //第三方联系方式
				other_cycle:'', //收运周期/天
				farm_collection_total:'', //第三方总量/吨
				imgList: [],
				imagePaths:[],
				farm_county: "",
				farm_town: "",
				farm_village: "",
				latitude: "", //纬度
				longitude: "",//经度
			}
		},
		components: {
			levelLinkage
		},
		onLoad() {
			
		},
		onNavigationBarButtonTap() {
			this.submit();
		},
		onReady() {
			
		},
		methods: {
			openLevel() {
				this.$refs.levelLinkage.open();
			},
						
			
			onConfirm(e) {
				// e 确认后选中的数据
				//console.log(e)
				this.pickerText = e.name
				this.farm_county = e.firstPick.name
				this.farm_town = e.secondPick.name
				this.farm_village = e.thirdPick.name
				//console.log(this.farm_county,this.farm_town,this.farm_village)
			},
			
			chooseEdress () {
				uni.chooseLocation({
				    success: (res) => {
				        console.log('位置名称：' + res.name);
				        console.log('详细地址：' + res.address);
				        console.log('纬度：' + res.latitude);
				        console.log('经度：' + res.longitude);
						
						this.farmAddress = res.address
						this.latitude = res.latitude
						this.longitude = res.longitude
				    }
				});
			},
			
			ChooseImage() {
				uni.chooseImage({
					count:4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
						// console.log(this.imgList)
					}
				});
			},
			//预览图片
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			//取消上传
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要取消该照片的上传吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			//图片上传
			imageUpload(FilePaths){
				 uni.uploadFile({
				            url:this.confige.webUrl+"/epidemic/addProFile",
				            filePath: FilePaths,
				            name: 'file',
				            formData:{
				                'token':this.User.token
				            },
				            success: (uploadFileRes) => {
								let img = JSON.parse(uploadFileRes.data)
								this.imagePaths.push(img.url)
				            }
				});
			},
			
			//是否禁养区
			radioChange: function(evt) {
				this.farm_prohibited_area = evt.target.value
				console.log(this.farm_prohibited_area)
			},
			//是否直排
			radioChange6: function(evt) {
				this.farm_straight = evt.target.value
				console.log(this.farm_straight)
			},
			radioChange1: function(evt) {
				this.farmDryExcrement = evt.target.value
				console.log(this.farmDryExcrement)
			},
			radioChange2: function(evt) {
				this.farmWaterImprovement = evt.target.value
				console.log(this.farmWaterImprovement)
			},
			radioChange3: function(evt) {
				this.farm_certificate = evt.target.value
			},
			radioChange4: function(evt) {
				this.farmUseProbiotics = evt.target.value
				console.log(this.farmUseProbiotics)
			},
			radioChange5: function(evt) {
				this.farmTransformation = evt.target.value
				console.log(this.farmTransformation)
			},
			
			submit () {
				var mobileReg=/^1[34578]\d{9}$/
				if(this.farmName.toString() === ''){
					uni.showToast({
						title:"请填写养殖场名称",
						icon: "none"
					})
					return;
				}
				else if(this.farmFarmers.toString() === ''){
					uni.showToast({
						title:"请填写养殖户名称",
						icon: "none"
					})
					return;
				}
				else if(!mobileReg.test(this.farmFarmersPhones)){
					uni.showToast({
						title:"请正确填写养殖户联系方式",
						icon: "none"
					})
					return;
				}
				
				else if(this.farmLianliancunCadres.toString() === ''){
					uni.showToast({
						title:"请填写挂联村干部姓名",
						icon: "none"
					})
					return;
				}
				else if(this.farmLianliancunCadres.toString() === ''){
					uni.showToast({
						title:"请填写挂联村干部姓名",
						icon: "none"
					})
					return;
				}
				else if(!mobileReg.test(this.farmCadresPhone)){
					uni.showToast({
						title:"请正确填写挂联村干部联系方式",
						icon: "none"
					})
					return;
				}
				else if(this.pickerText.toString() === ''){
					uni.showToast({
						title:"请选择所属区域",
						icon: "none"
					})
					return;
				}
				else if(this.farmAddress.toString() === ''){
					uni.showToast({
						title:"请选择养殖场地址",
						icon: "none"
					})
					return;
				}
				else if(this.farmSeed.toString() === ''){
					uni.showToast({
						title:"请填写畜牧数量",
						icon: "none"
					})
					return;
				}
				else if(this.farmTotalArea.toString() === ''){
					uni.showToast({
						title:"请填写栏舍总面积",
						icon: "none"
					})
					return;
				}
				else if(this.farmTraditionalHurdles.toString() === ''){
					uni.showToast({
						title:"请填写传统栏舍面积",
						icon: "none"
					})
					return;
				}
				else if(this.farmElevatedBed.toString() === ''){
					uni.showToast({
						title:"请填写高架床面积",
						icon: "none"
					})
					return;
				}
				else if(this.farmLowBed.toString() === ''){
					uni.showToast({
						title:"请填写低架床面积",
						icon: "none"
					})
					return;
				}
				else if(this.farmBiogasDigester.toString() === ''){
					uni.showToast({
						title:"请填写沼气池体积",
						icon: "none"
					})
					return;
				}
				else if(this.farmSepticTank.toString() === ''){
					uni.showToast({
						title:"请填写储粪池面积",
						icon: "none"
					})
					return;
				}
				else if(this.farmStorageTank.toString() === ''){
					uni.showToast({
						title:"请填写储液池体积",
						icon: "none"
					})
					return;
				}
				else if(this.farmDryExcrement.toString() === ''){
					uni.showToast({
						title:"请填写是/否干清粪",
						icon: "none"
					})
					return;
				}
				else if(this.farmWaterImprovement.toString() === ''){
					uni.showToast({
						title:"请填写是/否改水",
						icon: "none"
					})
					return;
				}
				else if(this.farmUseProbiotics.toString() === ''){
					uni.showToast({
						title:"请填写是/否使用益生菌",
						icon: "none"
					})
					return;
				}
				else if(this.farmTransformation.toString() === ''){
					uni.showToast({
						title:"请填写是/否完成生态化改造",
						icon: "none"
					})
					return;
				}
				else if(this.farmAbsorptiveArea.toString() === ''){
					uni.showToast({
						title:"请填写自有土地消纳总量/吨",
						icon: "none"
					})
					return;
				}
				else if(this.farmTotalConsumption.toString() === ''){
					uni.showToast({
						title:"请填写土地消纳面积",
						icon: "none"
					})
					return;
				}
				else if(!this.farm_raise_crops){
					uni.showToast({
						title:"请填写种植作物",
						icon: "none"
					})
					return;
				}
				else if(this.otherNames.toString() === ''){
					uni.showToast({
						title:"请填写第三方消纳机构名称",
						icon: "none"
					})
					return;
				}
				else if(!mobileReg.test(this.otherPhone)){
					uni.showToast({
						title:"请正确填写第三方联系方式",
						icon: "none"
					})
					return;
				}
				else if(!this.farm_collection_total){
					uni.showToast({
						title:"请填写第三方消纳总量",
						icon: "none"
					})
					return;
				}
				else if(!this.other_cycle){
					uni.showToast({
						title:"请填写收运周期/天",
						icon: "none"
					})
					return;
				}
				else if(!this.farm_straight){
					uni.showToast({
						title:"请选择是否直排",
						icon: "none"
					})
					return;
				}
				
				else if(!this.farm_prohibited_area){
					uni.showToast({
						title:"请选择是否禁养区",
						icon: "none"
					})
					return;
				}
				else { 
					uni.showLoading({
						title:"填报中..."
					})
					// uni.showModal({
					// 	title: "确认所填写的内容",
					// 	content: 
					// 			 "养殖场名称：" + this.farmName + "\n" +
					// 			 "养殖户名称：" + this.farmFarmers + "\n" +
					// 			 "养殖户联系方式：" + this.farmFarmersPhones + "\n" +
					// 			 "挂联村干部姓名：" + this.farmLianliancunCadres + "\n" +
					// 			 "挂联村干部联系方式：" + this.farmCadresPhone + "\n" +
					// 			 "所属区域：" + this.farm_county + '-' + this.farm_town + '-' + this.farm_village  + "\n" +
					// 			 "养殖场地址：" + this.farmAddress + "\n" +
					// 			 "畜牧数量：" + this.farmSeed + "\n" +
					// 			 "栏舍总面积：" + this.farmTotalArea + "\n" +
					// 			 "传统栏舍面积：" + this.farmTraditionalHurdles + "\n" +
					// 			 "高架床面积：" + this.farmElevatedBed + "\n" +
					// 			 "低架床面积：" + this.farmLowBed + "\n" +
					// 			 "沼气池体积：" + this.farmBiogasDigester + "\n" +
					// 			 "储粪池面积：" + this.farmSepticTank + "\n" +
					// 			 "储液池体积：" + this.farmStorageTank + "\n" +
					// 			 "是/否干清粪：" + this.farmDryExcrement + "\n" +
					// 			 "是/否改水：" + this.farmWaterImprovement + "\n" +
					// 			 // "是/否直排：" + this.farmStraight + "\n" +
					// 			 "是/否使用益生菌：" + this.farmUseProbiotics + "\n" +
					// 			 "是/否完成生态化改造：" + this.farmTransformation + "\n" +
					// 			 "自由土地消纳总量/吨：" + this.farmAbsorptiveArea + "\n" +
					// 			 "土地消纳面积：" + this.farmTotalConsumption + "\n" +
					// 			 // "种植作物：" + this.farmRaiseCrops + "\n" +
					// 			 "第三方消纳机构名称：" + this.otherNames + "\n" +
					// 			 "第三方联系方式：" + this.otherPhone + "\n",
					// 			 // "收运周期/天：" + this.otherCycle + "\n" ,
					// 			 // "第三方消纳总量/吨：" + this.farmCollectionTotal + "\n"
					if(this.imgList.length>0){
						for(let i=0;i<this.imgList.length;i++){
							this.imageUpload(this.imgList[i]);
						}
					}
							console.log(this.other_cycle)
				uni.request({
					url:this.confige.webUrl+"/statistics/addBreeding",
					data:{
						farm_collection_total:this.farm_collection_total,//第三方消纳总量
						other_cycle:this.other_cycle,//运收周期
						farm_raise_crops:this.farm_raise_crops,//种植作物
						farm_certificate:this.farm_certificate,//有无免疫合格证
						farm_straight:this.farm_straight,//是否直排
						farm_prohibited_area:this.farm_prohibited_area,//是否禁养
						farm_name: this.farmName,
						farm_farmers: this.farmFarmers,
						farm_farmers_phones: this.farmFarmersPhones,
						farm_lianliancun_cadres: this.farmLianliancunCadres,
						farm_cadres_phone: this.farmCadresPhone,
						farm_address:  this.farmAddress,//养殖场地址补充
						farm_seed: this.farmSeed,
						farm_total_area: this.farmTotalArea,
						farm_traditional_hurdles: this.farmTraditionalHurdles,
						farm_elevated_bed: this.farmElevatedBed,
						farm_low_bed: this.farmLowBed,
						farm_biogas_digester: this.farmBiogasDigester,
						farm_septic_tank: this.farmSepticTank,
						farm_storage_tank: this.farmStorageTank,
						farm_dry_excrement: this.farmDryExcrement,
						farm_water_improvement: this.farmWaterImprovement,
						farm_use_probiotics: this.farmUseProbiotics,
						farm_transformation: this.farmTransformation,
						farm_absorptive_area: this.farmAbsorptiveArea,
						farm_total_consumption: this.farmTotalConsumption,
						other_names: this.otherNames,//第三方消纳机构名称
						other_phone:this.otherPhone,
						picture:this.imagePaths,
						farm_longitude: this.longitude,
						farm_latitude: this.latitude,
						farm_county: this.farm_county,
						farm_town: this.farm_town,
						farm_village: this.farm_village
					},
					method:"POST",
					header:{
						'X-Token':this.User.token
					},
					success: (res) => {
						console.log(res)
						setTimeout(()=>{
							uni.hideLoading()
							if(res.data.code == '200') {
								uni.showModal({
									title: "提示",
									content: "填报成功！",
									showCancel: false,
									success: (e) => {
										if(e.confirm){
											this.imagePaths = []
											uni.navigateBack({
												delta: 1
											})
										}
									}
								})
							}
							else{
								if(this.imagePaths.length > 0){
									uni.request({
										url: this.confige.webUrl+'/delePicture',
										data: {
											picture: this.imagePaths
										},
										method:"GET",
										header: {
											'Content-Type' : "application/json;charset=UTF-8",
											'X-Token':this.User.token
										},
										success: (res) => {
											console.log(res)
										}
										
									})
								}
								setTimeout(() => {
									uni.showModal({
										title: "提示",
										content: res.data.message,
										showCancel: false,
										success: (e) => {
											if(e.confirm){
												this.imagePaths = []
											}
										}
									})
								},200)
							}
						},1500)
						
					}
				})
						
				}
				
			}
		}
	}
</script>

<style lang="less" scoped>
	@import "../../common/colorui/main.css";
	@import "../../common/colorui/icon.css";
	@import "../../common/global.less";
	.RadioStyle{
		radio{
			margin-right: 10rpx;
			font-size: 30rpx;
			}
	}
	.formModel{
		background-color:@backcolorthree;
		border-bottom:2rpx solid #eaeaea;
		.cu-form-group {
			.title {min-width: calc(4em + 15px);}		
		}
	}
	
	.chooseImg{
		width: 750rpx;
		height: auto;
		margin-top: 60rpx;
		margin-bottom: 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.submit {
		width: 710rpx;
		height: 80rpx;
		margin-top: 100rpx;
		margin-bottom: 30rpx;
	}
	
	.submit button {
		background-color: #4AC997;
		color: white;
		font-weight: bold;
		border-radius: 60rpx;
		margin-left: 40rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
</style>
